<template>
  <div> 
    <el-button type="success" icon="el-icon-plus"  @click="addTable">添加</el-button>
    <el-button type="warning" icon="el-icon-share" @click="clearTable">清空所有</el-button>
    <el-button type="warning" icon="el-icon-share" @click="clearTable2">清空选中的</el-button>
    <el-button type="danger"  icon="el-icon-delete" @click="delTable">删除</el-button>
    <el-table :data="ruleForm.handleBookList" class="table1"
    @selection-change="handleDetailSelectionChange" :row-class-name="rowClassName" ref="tb">
          <el-table-column type="selection" width="30" align="center" />
          <el-table-column type="index"  label="序号" width="50"></el-table-column>
          <el-table-column label="教材名称" width="300">
             <template slot-scope="scope">
                <el-input v-model="scope.row.bookName"></el-input>
             </template>
           </el-table-column>
          <el-table-column label="开本"  width="200">
            <template slot-scope="scope">
              <el-select  v-model="scope.row.kaiben" class="kaiben">
                <el-option v-for="item in selectData.kaiben" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="计量单位" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.measure"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="数量"  width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.bookQuantity"></el-input>
            </template>
          </el-table-column>
          ......
          <el-table-column label="备注" width="250">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark"></el-input>
            </template>
          </el-table-column>
      </el-table>
  </div>
</template>
<script>
export default{
  name:'TableAddDelete',
  data(){
    return{
      ruleForm: {
          handleBookList: [
            {
              bookName: "",                   //教材名称
              bookPrice: "",                  //单价
              bookQuantity: "",               //教材数量
              concentratedApplication: "",    //集中申请数
              concentratedAudit: "",          //集中审核数
              measure: "",                    //计量单位
              remark: "",                     //备注
              sporadicApplication: "",        //零星申请数量
              sporadicAudit: "",              //零星审核数量
              totalApplication: "",           //合计申请数
              totalAudit: "",                 //合计审核数
              totalUpdate: "",                //合计 审核数量
            }
          ]
      },
      //选中的表数据
      checkedDetail: [],
      selectData:{
        kaiben:[
            { label:'北京',value:'001' },
            { label:'南京',value:'002' },
            { label:'天津',value:'003' }
           ]
        }
      }
  },
  methods:{
    addTable() {
      if (this.ruleForm.handleBookList == undefined) {
        this.ruleForm.handleBookList = new Array();
      }
      let obj = {};
      // obj.bookName = "123",                   //教材名称
      this.ruleForm.handleBookList.push(obj);
    },
    clearTable() {
      this.ruleForm.handleBookList = undefined
    },
    clearTable2(){
      //twoArr.filter(twoItem => !oneArr.some(oneItem => oneItem === twoItem))
      if(this.checkedDetail.length ===0) alert('请先选中一项')
      this.ruleForm.handleBookList =this.ruleForm.handleBookList&&this.ruleForm.handleBookList.filter(twoItem => !this.checkedDetail.some(oneItem => oneItem === twoItem))
    },
    delTable() {
      if (this.checkedDetail.length == 0) {
        this.$alert("请先选择要删除的数据", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        this.ruleForm.handleBookList.splice(this.checkedDetail[0].index - 1, 1);
      }
    },
    // 新增一条数据  把新增数据里的index + 1   数据里的index 初始是1  行索引(rowIndex) 初始是0
    rowClassName({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    handleDetailSelectionChange(selection) {
      console.log('selection1111',selection);
      if (selection.length > 1) {         //删除一行
        this.$refs.tb.clearSelection(); // 清空用户的选择
        this.$refs.tb.toggleRowSelection(selection.pop());//切换某一行的选中状态
      } else {
        this.checkedDetail = selection;
      }
      //this.checkedDetail = selection;
    },
  }
}
</script>